/**
 * React实现了一套与浏览器无关的DOM系统
 * className：使用此属性指定一个CSS类
 * onChange：实时处理用户输入
 * htmlFor：react使用htmlFor来替换Javascript中的for
 */

import React, { Component } from "react";

//引入图片
import logo from "./images/2021287704195583123.jpg";
// 采用require来引入图片
const img2 = require("./images/1.jpg").default;

const App = () => {
    const title = "<h1>hello react</h1>";
    return (
        <div className="App">
            {/* 注意行内样式的写法 */}
            <h2
                style={{ width: "100%", height: "80%", backgroundColor: "red" }}
            >
                style
            </h2>

            {/* dangerouslySetInnerHTML是一个函数，
            是React提供的替换浏览器DOM中的innerHTML接口的一个函数
            运用这个函数可以让字符串内的东西在页面渲染出来
            */}
            <div dangerouslySetInnerHTML={{ __html: title }}></div>

            {/* 底下这样的写法只会在页面中显示一个字符串，而不会渲染出来 */}
            <div>{title}</div>

            {/* label标签可以实现在点击“用户名：”时让表单获得焦点，
            必须使用htmlFor属性来连接表单的属性 */}
            <label htmlFor="inp">用户名:</label>
            <input id="inp" />

            {/* react在页面中渲染图片的格式 */}
            <img src={logo} alt="图片" />
            <img src={img2} alt="2" />
        </div>
    );
};
export default App;
